<template>
  <div class="login">
    <hm-header>登录</hm-header>
    <hm-log></hm-log>
    <hm-input
      type="text"
      placeholder="请输入用户名"
      v-model="username"
      :rule="/^1\d{4,10}$/"
      message="用户名格式不对"
      ref="username"
    ></hm-input>
    <hm-input
      type="password"
      placeholder="请输入密码"
      v-model="password"
      :rule="/^\d{3,12}$/"
      message="用户名密码格式错误"
      ref="password"
    ></hm-input>
    <hm-button @click="login">登录</hm-button>

    <!-- 去注册的链接 -->
    <div class="go-register">
      没有账号？去
      <router-link class="link" to="/register">注册</router-link>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    login() {
      if (!this.$refs.username.validate(this.username)) {
        return
      }
      if (!this.$refs.password.validate(this.password)) {
        return
      }
      this.$axios({
        method: 'post',
        url: '/login',
        data: {
          username: this.username,
          password: this.password
        }
      }).then(res => {
        console.log(res.data)
        if (res.data.statusCode === 200) {
          this.$toast.success('恭喜您登陆成功')
          this.$router.push('/user')
        } else {
          this.$toast.fail('用户名或者密码错误')
        }
      })
    }
  },
  data() {
    return {
      username: '',
      password: ''
    }
  },
  created() {
    console.log(this.$route)
    this.username = this.$route.params.username
    this.password = this.$route.params.password
  }
}
</script>

<style lang="less" scoped>
.go-register {
  font-size: 16px;
  text-align: right;
  margin: 0 20px;
  .link {
    color: orange;
  }
}
</style>
